<template>
  <div class="box">
    <div class="header">

      <div class="header-left">
        <van-icon name="arrow-left" size="28px" @click="goback" />
        <div class="header-left-left"><img :src="state.head" alt="">
        </div>
        <div class="header-left-right"><span>{{ item[0] }}</span></div>
      </div>
      <div class="header-right">
        <div class="header-right-left">
          <van-button type="primary" size="small" color="#33bfbf">关注</van-button>
        </div>
        <div class="header-right-right">
          <van-icon name="share-o" size="20px" />

        </div>


      </div>
    </div>
    <div class="content">
      <div class="content-top">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="(item, index) in state.arr" :key="index">
            <img :src="item" />
          </van-swipe-item>
        </van-swipe>

      </div>
      <div class="content-middle">
        <div class="content-middle-top">
          <h3>{{ state.title }}</h3>
        </div>
        <div class="content-middle-bottom">
          <p>
            {{ state.content }}
          </p>
        </div>
      </div>
      <div class="content-bottom">
        <div class="content-bottom-top">
          <h2>3条评论</h2>
        </div>
        <div class="content-bottom-main">
          <ul>
            <van-swipe-cell>
              <li>
                <div class="left"><img src="https://p.qqan.com/up/2020-5/2020051811245458831.jpg" alt="">
                  <div class="content-msg">
                    <div class="name">小青</div>
                    <div class="message">哈哈哈，我也觉得好好看</div>
                    <div class="key-msg">
                      <div class="time">5分钟前.</div>
                      <div class="address">江西省</div>
                      <div class="reply">回复</div>
                    </div>

                  </div>
                </div>
                <div class="tail">
                  <div class="tail-left"><van-icon name="like-o" size="15px" /></div>
                  <div class="tail-right"><van-icon name="like" size="15px" /></div>
                </div>
              </li>
            </van-swipe-cell>
          </ul>
        </div>

      </div>
    </div>
    <van-floating-bubble v-if="item[4]"
  axis="xy"
  icon="https://ts1.cn.mm.bing.net/th/id/R-C.dbe8eba589e507101f46e6942c2c3c96?rik=LrCAIBU8kf1%2boA&riu=http%3a%2f%2fwww.chaonanclub.com%2fuploads%2fallimg%2f200321%2f2-200321121Z3-50.jpg&ehk=dUHE57AfnYm%2ffO8plURe0HET3uiRpFMVHeku17oh0%2bE%3d&risl=&pid=ImgRaw&r=0"
  magnetic="x"
  @offset-change="onOffsetChange"
  @click="go3D"
/>
    <div class="footer">
      <div class="footer-content">
        <div class="footer-content-left">
          <van-cell-group inset>
            <van-field placeholder="欢迎友善评论" size='large' />
          </van-cell-group>
        </div>
        <div class="footer-content-right ">
          <div class="icon-1"><van-icon name="like-o" size="20px" />{{ state.lovers }}</div>
          <div class="icon-2"><van-icon name="star-o" size="20px" />{{ state.collect }}</div>
          <div class="icon-3"><van-icon name="comment-o" size="20px" />{{ state.comment }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive,onBeforeMount } from 'vue';
import axios from '@/api'
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const images = [
  'https://ts1.cn.mm.bing.net/th/id/R-C.beccda4f9e7b0327cb2021e3b199184e?rik=LATDMGMoKEn%2btg&riu=http%3a%2f%2finews.gtimg.com%2fnewsapp_match%2f0%2f3494345968%2f0&ehk=4nUCYgoxWE08taRPNmix2%2bZmsPc3VsZkubz8RT9y5ec%3d&risl=&pid=ImgRaw&r=0',
  'https://ts1.cn.mm.bing.net/th/id/R-C.dee50ab07a2b84ae8ab0856fdfa67cf6?rik=KVUOxJjQSt0flg&riu=http%3a%2f%2fwww.guangyuanol.cn%2fuploads%2fallimg%2f201022%2f1K6154145-2.jpg&ehk=SX%2fqFAn0GDXFaebXHFJ6q40o0s4Blz1ObLyArdqLvBo%3d&risl=&pid=ImgRaw&r=0',
  "http://pic.imeitou.com/uploads/allimg/230710/10-230G01G433.jpg"
];
const state = reactive({
  arr: [],
  list: [],
  title:'',
  content:'',
  lovers:'',
  collect:'',
  comment:'',
  head:'',
  havd3d:''
})

const item = JSON.parse(route.query.item)
console.log(item);
onBeforeMount(async () =>{
  try {
    const  {data}  = await axios.get('users/picture', {
      params: {
        picId: item[2]
      }
    })
    // console.log(data[0]);
    for (const key in data[0]) {
      if (data[0][key] !== null) {
        state.arr.push(data[0][key])

      }
    }
    state.arr.splice(0, 2)
    // console.log(state.arr);
  } catch (error) {
    console.log(error)
  }
})
onMounted(async () => {
  try {
    const { data } = await axios.get('users/detail', {
      params: {
        detailId: item[3]
      }

    })
    console.log(data);
    state.title = data[0].title
    state.content = data[0].content
    state.collect = data[0].collect
    state.comment = data[0].comment
    state.lovers = data[0].lovers
  } catch (error) {
    console.log(error)
  }

  try {
    const { data } = await axios.get('users/userdata', {
      params: {
        userId: item[1]
      }

    })
    console.log(data);
    state.head = data[0].head

  } catch (error) {
    console.log(error)
  }
  
  


})

const goback = () => {
  history.back()
}
const go3D = () =>{
  router.push('/shoes')
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  overflow: auto;
  position: relative;

  .header {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    background: #fff;

    .header-left {
      display: flex;
      justify-content: center;
      align-items: center;

      .header-left-left {
        img {
          width: 0.75rem;
          height: 0.75rem;
          border-radius: 50%;
        }
      }

      .header-left-right {
        margin-left: 0.25rem;
        font-size: 15px;
      }

    }

    .header-right {
      display: flex;
      justify-content: center;
      align-items: center;

      .header-right-left {
        margin-right: 0.25rem;
        width: 50px;
      }

      .header-right-right {
        margin-right: 0.25rem;
      }
    }
  }

  .content {
    margin-top: 48px;
    z-index: 2;
    margin-bottom: 2rem;

    .content-top {
      img {

        width: 100vw;
        height: 13rem;
        object-fit: cover;


      }
    }

    .content-middle {
      padding: 0.25rem;

      .content-middle-top {
        font-size: 18px;
      }

      .content-middle-bottom {
        margin-top: 0.25rem;
        font-size: 15px;
      }
    }

    .content-bottom {
      margin: 0.25rem;

      .content-bottom-top {

        margin-bottom: 0.25rem;

        h2 {
          color: #000;
          font-size: 0.45rem;
        }

      }

      .content-bottom-main {
        ul {
          li {
            display: flex;
            justify-content: space-between;



            .left {
              display: flex;

              img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
              }

              .content-msg {
                margin-left: 20px;
                padding: 6px 0;

                .name {
                  font-size: 0.35rem;
                  color: #4f4f4f8d;
                }

                .message {
                  margin-top: 0.125rem;

                  font-size: 12px;
                }

                .key-msg {
                  display: flex;
                  align-items: center;
                  margin-top: 0.15rem;

                  .time {
                    color: #4f4f4f;
                    margin-right: 0.015rem;
                  }

                  .address {
                    color: #4f4f4f;
                  }

                  .reply {
                    margin-left: 0.125rem;
                  }
                }
              }
            }

            .tail {
              position: absolute;
              display: flex;
              align-items: center;
              padding-right: 15px;
              bottom: 6px;
              right: 0;

              .tail-left {
                margin-right: 0.25rem;
              }
            }

          }
        }
      }
    }
  }

  .footer {
    position: fixed;
    z-index: 5;
    bottom: 0;
    width: 100%;
    height: 1.5rem;

    .footer-content {
      background: #fff;

      display: flex;

      .footer-content-left {
        padding: 0.25rem;
        border-radius: 10px;
        height: 1.5rem;
      }

      .footer-content-right {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex: 1;
      }
    }
  }
}
</style>
<style scoped>
.van-field__control {
  background: #ccc;
  border-radius: 15px;
}



:root:root {
  --van-field-placeholder-text-color: white
}
</style>